

.main {
    position: absolute;
    top: 7%;
    right: 0px;
    width: 84%;
    /*background-color: pink;*/
}


table {
    border-collapse: collapse;
    width: 98%;
    /*max-width: 800px;*/
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-top: 10px;
}

th,
td {
    text-align: center;
    padding: 10px;
    color: #333;
}

td {
    width: 14%;
}

td:nth-child(1) {
    width: 5%;
}

th {
    background-color: #868E96;
    color: #fff;
}

tr:nth-child(even) {
    background-color: #ecf0f1;
}

tr:nth-child(odd) {
    background-color: #fff;
}

.action-buttons {
    /*display: flex;*/
    /*justify-content: space-between;*/
}

.action-button {
    padding: 8px 16px;
    margin: 5px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.edit-button {
    background-color: #2ecc71;
    color: #fff;
}

.delete-button {
    background-color: #e74c3c;
    color: #fff;
}

.search-container {
    /*margin-top: 20px;*/
    display: flex;
    align-items: center;
}

.search-box {
    padding: 7px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-right: 10px;
}

.search-button,
.reset-button {
    padding: 7px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    color: #fff;
}

.search-button {
    background-color: #3498db;
}

.add-button {
    background-color: #17A2B8;
    color: #ffffff;
}

.reset-button {
    background-color: #868E96;
    color: #ffffff;
}

.pagination {
    margin-top: 20px;
    color: #333;
    position: absolute;
    right: 20px;
}

.page-link {
    background-color: #C0C4CD;
    color: #ffffff;
    padding: 5px 10px;
    margin: 0 5px;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
}

/*.current-page {*/
/*    background-color: #3498db;*/
/*    color: #fff;*/
/*}*/

/* 复选框样式 */
input[type="checkbox"] {
    margin: 0;
    width: 20px;
    height: 20px;
}

/* 弹出提示样式 */
.notificationBlue {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #3498db;
    color: #fff;
    text-align: center;
    padding: 10px;
    z-index: 999;
    opacity: 0;
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.show {
    opacity: 1;
    transform: translateY(0);
}

.notificationGrey {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: Grey;
    color: #fff;
    text-align: center;
    padding: 10px;
    z-index: 999;
    opacity: 0;
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.notificationYellow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: Yellow;
    color: #fff;
    text-align: center;
    padding: 10px;
    z-index: 999;
    opacity: 0;
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}